<template>
  <div class="detail-info">
    <div class="info-top">
      <div class="flex-left">
        <div>
          <span class="comment-score">4.7</span >
          <span class="comment-txt">分</span>
          <span class="comment-desc">很棒</span></div>
        <div><span class="comment-total-num">417条评论</span><span class="right-arrow-left">&gt;</span></div>
      </div>
      <div class="flex-right">
        <div class="prod">景点简介</div>
        <div class="tips">开放时间、贴士<span class="right-arrow-right">&gt;</span></div>
      </div>
    </div>
    <div class="info-bottom">
      <span class="iconfont">&#xe617;</span>
      <span class="address">广东省佛山市顺德区均安镇沙埔路</span>
      <span class="right-arrow-right">&gt;</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailInfo'
}
</script>

<style lang="stylus" scoped>
  .detail-info
    top -.1rem
    border-radius .1rem .1rem 0 0
    padding .1rem .2rem 0
    background #fff
    .info-top
      display flex
      padding .1rem 0 .2rem
      .flex-left
        flex 1
        position: relative
        .comment-score
          color #ff8300
          font-size .44rem
          line-height .44rem
        .comment-txt,.comment-desc
          color #ff8300
          font-size .28rem
          line-height .48rem
        .comment-desc
          margin-left .2rem
        .comment-total-num
          font-size .24rem
          color #9e9e9e
          line-height .32rem
          margin-right .2rem
        .right-arrow-left
          position absolute
          right .3rem
          top .2rem
          font-size .32rem
          color #9e9e9e
      .flex-right
        flex 1
        position relative
        .prod
          font-size .28rem
          line-height .48rem
          padding-left .3rem
        .tips
          font-size .24rem
          color #9e9e9e
          line-height .32rem
          padding-left .3rem
        .right-arrow-right
          position absolute
          right 0
          top .2rem
          font-size .32rem
          color #9e9e9e
    .info-bottom
      position relative
      line-height .36rem
      padding .2rem 0
      .address
        padding .1rem
      .right-arrow-right
        position absolute
        right 0
        top 50%
        margin-top -.14rem
        font-size .32rem
        color #9e9e9e
</style>
